<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>多列表格</title>
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2047603_mvshpgq6dqk.css">
  <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.0.3/dist/antd.min.css">
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <script src="../js/moment.min.js"></script>
  <script src="../js/antd.min.js"></script>
  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    // 获取每一行的 值 该行对象  该行索引
    const renderContent = (value, row, index) => {
      const obj = { children: value, props: {}, };
      if (index === 4) { obj.props.colSpan = 0; }
      return obj;
    };

    const columns = [
      {
        title: 'Name', dataIndex: 'name', render: (text, row, index) => {
          if (index < 4) { return <a>{text}</a>; }
          return { children: <a>{text}</a>, props: { colSpan: 5, }, };
        },
      },
      { title: 'Age', dataIndex: 'age', render: renderContent, },
      {
        title: 'Home phone',
        colSpan: 2,
        dataIndex: 'tel',
        render: (value, row, index) => {
          const obj = { children: value, props: {}, };
          if (index === 2) { obj.props.rowSpan = 2; }
          // These two are merged into above cell
          if (index === 3) { obj.props.rowSpan = 0; } if (index === 4) { obj.props.colSpan = 0; } return obj;
        },
      },
      { title: 'Phone', colSpan: 0, dataIndex: 'phone', render: renderContent, },
      { title: 'Address', dataIndex: 'address', render: renderContent, },
    ];

    const data = [
      { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', },
      { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park', },
      { key: '3', name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, address: 'Sidney No. 1 Lake Park', },
      { key: '4', name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'London No. 2 Lake Park', },
      { key: '5', name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'Dublin No. 2 Lake Park', },
    ];

    ReactDOM.render(<antd.Table columns={columns} dataSource={data} bordered />,
      document.getElementById('root')
    );
  </script>
</body>

</html>